import React, { useEffect, useState } from 'react'
import Taro, { FC } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import api from '@/services/config/index'

import './index.scss'

type TabList = Array<{
  title: string
  countNum: string
  icon: string
  id: string
}>
type ItemList = Array<{
  avatarUrl: string
  catName: string
  addressId: string
  // 物品名称
  title: string
  // 图片路径
  imagePath: Array<{
    imagePath: ''
  }>
  // 物品id
  shareId: string
}>
const ItemLIst: FC = () => {
  const [current, setCurrent] = useState<number>(0)
  const [tabList, setTabList] = useState<TabList>([])
  const [itemList, setItemList] = useState<ItemList>([])
  function getShareList(item) {
    const params = {
      pageSize: 10,
      pageNoLL: 1,
      houseId: '',
      catId: item.id,
      topicId: '',
      type: 1,
      hot: 1,
      userId: '',
      districtId: ''
    }
    api['itemSharing/getShareList'](params)
      .then((res) => {
        setItemList(res.data)
      })
      .catch((_) => {
        setItemList([])
      })
  }
  function getShareCat() {
    return api['itemSharing/getShareCat']().then((res) => {
      const data = res.data
      data.forEach((item) => {
        item.title = item.catName
      })
      setTabList(data)
      return data
    })
  }

  useEffect(() => {
    async function fetchData() {
      const response = await getShareCat()
      getShareList(response[0])
    }
    fetchData()
  }, [])

  return (
    <View className='itemList'>
      <AtTabs
        current={current}
        scroll
        height='100vh'
        tabDirection='vertical'
        tabList={tabList}
        onClick={(i) => {
          setCurrent(i)
          getShareList(tabList[i])
        }}
      >
        {tabList.map((item) => {
          return (
            <AtTabsPane tabDirection='vertical' current={current} index={0} key={item.id}>
              {itemList.length > 0 ? (
                <View className='itemList-sublist'>
                  {itemList.map((ele) => {
                    return (
                      <View
                        key={ele.addressId}
                        className='itemList-sublist__info'
                        onClick={() => {
                          Taro.navigateTo({
                            url:
                              '/pages/ItemSharing/ItemDetails/index?shareId=' +
                              ele.shareId +
                              '&title=' +
                              ele.title
                          })
                        }}
                      >
                        <Image
                          src={ele.imagePath[0].imagePath}
                          className='itemList-sublist__info-img'
                        ></Image>
                        <Text>{ele.title}</Text>
                      </View>
                    )
                  })}
                </View>
              ) : (
                <View className='page-height c-flex'>暂无内容</View>
              )}
            </AtTabsPane>
          )
        })}
      </AtTabs>
    </View>
  )
}

ItemLIst.options = {
  addGlobalClass: true
}
export default ItemLIst
